<html>
    <head>
        <title>
            Introduction to lastChange Usage
        </title>
        <script type="text/javascript">

        <!--
            var myObject = {
                myProperty : 0
            }
            increaseMyProperty = function(){
                myObject.myProperty++;
                myObject.myProperty++;
                myObject.myProperty++;
                var reproducer = document.getElementById("reproducer");
                reproducer.innerHTML = "myObject.myProperty = " + myObject.myProperty;
            }
        -->
        </script>

    </head>

    <body id="myBody" onclick="increaseMyProperty()">
    <h1>Introduction to Debugging by lastChange</h1>
    <p>
    <i>lastChange</i> is a new debugging feature providing information about program state changes. From a breakpoint in a debugger
    a developer can ask for the <i>lastChange</i> on an object property.
    The <i>lastChange</i> feature provides information on the source line and data values at the point of change.</p>

    <p>This page provides a tutorial on <i>lastChange</i>. It contains an object <code>myObject</code>.
      Whenever the user clicks on the page, <code>myObject.myProperty</code> value increases by 3 and the displayed value changes.
    </p>

    <p>
       To see how <i>lastChange</i> works:
       <ol>
       <li> Open Firebug (F12 or Firebug Icon), then reload the page to update Firebug content</li>
       <li> Select Firebug Script panel </li>
       <li> set a breakpoint on line 17, where
        the value is written on the page.</li>
        <li> Reload the page and click on it. The breakpoint hits.</li>
        <li> In the Watch panel on the right side, check the value of <b>this.myObject.myProperty</b>.
        The value should be 3.
        <li>Now right-click on <b>myProperty</b> and select <i>lastChange</i>. The panel will switch to QP</li>
        <li>In the QP panel you can see the location of the last change of <b>myObject.myProperty</b>
        and the program state  at that point at the right side.</li>
        <li> You can ask for another, cascaded <i>lastChange</i>. From the TraceData panel on the right side select <b>this.myObject.myProperty</b>.
        Right click on <b>myProperty</b> and select <i>lastChange</i>. Now debugger shows
        a new location.</li>
        <li>All three locations, breakpoint, the first last change and the second last change are listed
        in the menu at the top of the panel.</li>
        </ol>
    </P>
    <p>
        <b>Note:</b> The implementation of <i>lastChange</i> is not yet complete for variables. We handle properties of variables but not the variable itself. In
            such cases you don't get any result from <i>lastChange</i> query.
    </p>
    <h2 id="reproducer">
      myObject.myProperty = 0;
    </h2>
    <p id>

    </p>
    </body>

</html>